<script setup>
import { ref } from "vue";
import NavigationBar from "@/components/navigationBar.vue";

const unpaidOrders = ref([
  {
    shopName: "万家饺子（软件园E18店）",
    total: 49,
    isOpen: false,
    details: [
      {name: "纯肉鲜肉（水饺） x 2", price: 15},
      {name: "玉米鲜肉（水饺） x 1", price: 16},
      {name: "配送费", price: 3},
    ],
  },
  {
    shopName: "小锅饭豆腐馆（全运店）",
    total: 55,
    isOpen: false,
    details: [
      {name: "纯肉鲜肉（水饺） x 2", price: 15},
      {name: "玉米鲜肉（水饺） x 1", price: 16},
      {name: "配送费", price: 3},
    ],
  },
]);

const paidOrders = ref([
  {
    shopName: "万家饺子（软件园E18店）",
    total: 49,
    isOpen: false,
    details: [
      {name: "纯肉鲜肉（水饺） x 2", price: 15},
      {name: "玉米鲜肉（水饺） x 1", price: 16},
      {name: "配送费", price: 3},
    ],
  },
  {
    shopName: "小锅饭豆腐馆（全运店）",
    total: 55,
    isOpen: false,
    details: [
      {name: "纯肉鲜肉（水饺） x 2", price: 15},
      {name: "玉米鲜肉（水饺） x 1", price: 16},
      {name: "配送费", price: 3},
    ],
  },
]);

function toggle(order) {
  order.isOpen = !order.isOpen;
}
</script>

<template>
  <div class="flex flex-col min-h-screen bg-white">
    <!-- 顶部标题栏 -->
    <header class="fixed top-0 left-0 right-0 bg-[#0097FF] text-white text-center text-xl py-4 z-10 shadow-md">
      <p>我的订单</p>
    </header>

    <!-- 内容区域 -->
    <main class="pt-[75px] px-4 pb-[70px] overflow-y-auto">
      <!-- 未支付订单 -->
      <h3 class="text-gray-500 font-semibold mb-2">未支付订单信息：</h3>
      <ul class="space-y-4">
        <li v-for="(order, index) in unpaidOrders" :key="'unpaid-' + index" class="border-b pb-2">
          <div class="flex justify-between items-center text-[16px] font-medium">
            <div class="flex items-center gap-2">
              <p>{{ order.shopName }}</p>
              <button @click="toggle(order)" class="text-gray-500">
                <span v-if="order.isOpen">▲</span>
                <span v-else>▼</span>
              </button>
            </div>
            <div class="flex items-center gap-2">
              <p class="text-black font-bold">&#165;{{ order.total }}</p>
              <button class="bg-orange-400 text-white px-2 py-1 rounded text-sm">去支付</button>
            </div>
          </div>
          <ul v-if="order.isOpen" class="mt-2 space-y-1 text-[14px] text-gray-700">
            <li v-for="(item, idx) in order.details" :key="'unpaid-detail-' + idx" class="flex justify-between">
              <p>{{ item.name }}</p>
              <p>&#165;{{ item.price }}</p>
            </li>
          </ul>
        </li>
      </ul>

      <!-- 已支付订单 -->
      <h3 class="text-gray-500 font-semibold mt-6 mb-2">已支付订单信息：</h3>
      <ul class="space-y-4">
        <li v-for="(order, index) in paidOrders" :key="'paid-' + index" class="border-b pb-2">
          <div class="flex justify-between items-center text-[16px] font-medium">
            <div class="flex items-center gap-2">
              <p>{{ order.shopName }}</p>
              <button @click="toggle(order)" class="text-gray-500">
                <span v-if="order.isOpen">▲</span>
                <span v-else>▼</span>
              </button>
            </div>
            <p class="text-black font-bold">&#165;{{ order.total }}</p>
          </div>
          <ul v-if="order.isOpen" class="mt-2 space-y-1 text-[14px] text-gray-700">
            <li v-for="(item, idx) in order.details" :key="'paid-detail-' + idx" class="flex justify-between">
              <p>{{ item.name }}</p>
              <p>&#165;{{ item.price }}</p>
            </li>
          </ul>
        </li>
      </ul>
    </main>

    <!-- 底部导航栏 -->
    <NavigationBar></NavigationBar>
  </div>
</template>
